#maze {
    height: 100%;
    background: url('~img/senglin2.png') no-repeat top center;
    background-size: cover;
    background-color: #000;
    .map{
        width:100%;
        height: 140px;
    }
    .cardsMain {
        // height: 135px;
        .deckMain {
            margin-top: 5px;
            position: relative;
            width: 50px;
            margin-left: 4px;
            height: 70px;
            .deck-number {
                position: absolute;
                font-size: 16px;
                bottom: 2px;
                right: 2px;
            }
            .deck {
                // border: 4px solid #D2D4D7;
                width: 50px;
                height: 70px;
                color: #fff;
                text-align: center;
                border-radius: 5px;
                background: #1F1A17;
                box-shadow: 1px 1px 0px #E1E1E1;
                .fonts-cardBg {
                    font-size: 32px;
                    color: #333;
                }
                &:nth-child(0) {
                    z-index: 11;
                    top: 0px;
                    left: 0px;
                }
            }
        }
        .resourceCards {
            height: 90px;
        }
        .cards {
            // width: 300px;
             margin-top: 5px;
            .card {
                text-align: center;
                position: relative;
                margin: auto;
                width: 70px;
                height: 95px; // border: 1px solid #fff;
                color: #000;
                font-weight: bold;
                border-radius: 5px;
                background-color: #fff;
                opacity: 0.9;
                box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
                &.active {
                    border: 2px solid rgb(5, 54, 117); //  box-sizing: content-box;
                }
                &.copy {
                    background-color: rgb(30, 28, 151);
                }
                .card-name {}
                .card-number-top {
                    position: absolute;
                    text-align: center;
                    font: 12px Georgia;
                    top: 2px;
                    left: 0px;
                    width: 23px;
                    text-align: center;
                    color: #000;
                }
                .card-number-bottom {
                    position: absolute;
                    text-align: center;
                    font: 12px Georgia;
                    bottom: 2px;
                    right: 0px;
                    width: 23px;
                    text-align: center;
                    color: #000;
                    transform: rotate(-180deg);
                }
            }
            .little-card {
                width: 60px;
                height: 90px; // border: 1px solid #fff;
            }
            .suitdiamonds:before,
            .suitdiamonds:after {
                content: "♦";
                color: #ff0000;
            }
            .suithearts:before,
            .suithearts:after {
                content: "♥";
                color: #ff0000;
            }
            .suitclubs:before,
            .suitclubs:after {
                content: "♣";
                color: #000;
            }
            .suitspades:before,
            .suitspades:after {
                content: "♠";
                color: #000;
            }
            div[class*='suit']:before {
                position: absolute;
                font-size: 20px;
                left: 5px;
                top: 12px;
            }
            div[class*='suit']:after {
                position: absolute;
                font-size: 20px;
                right: 5px;
                bottom: 12px;
                transform: rotate(-180deg);
            }
        }
    }
    .info {
        .playerInfo {
            width: 170px;
            height: 190px;
            background-color: #000;
            opacity: 0.8;
            .tool {
                padding: 5px;
                border-bottom: 3px solid #275512;
                height: 95px;
                .toolItem {
                    height: 22px;
                    .toolItem-icon {
                        width: 20px;
                    }
                    .toolItem-title {
                        width: 55px;
                        text-align: left;
                    }
                    .toolItemSet {
                        line-height: 18px;
                        height: 18px;
                        border-radius: 4px;
                        background-color: #007ACC;
                        width: 99px;
                        text-align: center;
                    }
                    .toolItemName {
                        width: 70px;
                        background-color: #007ACC;
                        color: #fff;
                        line-height: 18px;
                        height: 18px;
                        border-top-left-radius: 4px;
                        border-bottom-left-radius: 4px;
                        padding-left: 5px;
                        text-align: center;
                    }
                    .toolItemHp {
                        line-height: 18px;
                        height: 18px;
                        background-color: #2DB7F5;
                        padding: 0 5px;
                        border-top-right-radius: 4px;
                        border-bottom-right-radius: 4px;
                    }
                }
            }
            .teamInfo {
                border-bottom: 3px solid #275512;
                padding: 5px;
                height: 120px;
                .team-name {
                    // padding-left: 5px;
                    .icon {
                        font-size: 16px;
                    }
                }
                .team-item {
                    line-height: 22px;
                    height: 22px;
                    .hp-par {
                        margin-left: 5px;
                        border: 3px solid #ff0000;
                        line-height: 16px;
                        height: 16px;
                        width: 80px;
                        position: relative;
                    }
                    .hp-text {
                        line-height: 1;
                        position: absolute;
                        top: 0px;
                        right: 0px;
                        bottom: 0px;
                        left: 0px;
                    }
                    .hp {
                        height: 100%;
                        background-color: #CC3631;
                    }
                }
            }
            .player-status {
                border-bottom: 3px solid #275512;
                padding: 5px;
                .player-status-name {
                    line-height: 18px;
                    height: 18px;
                    background-color: #CC3631;
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                    padding-right: 5px;
                }
                .player-status-value {
                    line-height: 18px;
                    height: 18px;
                    background-color: #DE5D5F;
                    padding: 0 5px;
                    border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px;
                }
            }
            .icon {
                width: 20px;
                text-align: center;
            }
        }
        .cardInfoMain {
            margin-left: 5px;
            width: 140px;
            height: 140px;
        }
        .cardInfo {
            border: 2px solid #1F1A17;
            width: 100%;
            height: 100%;
            color: #fff;
            background-color: #000;
            border-radius: 5px;
            .cardInfo-name {
                height: 25px;
                font-size: 13px;
            }
            .cardInfo-desc {
                margin: 0 5px;
                height: 30px;
            }
            .cardInfo-info {
                padding-left: 5px;
                padding-top: 5px;
                height: 35px;
                background-color: #007ACC;
                border-radius: 4px;
            }
            .cardInfo-handle {
                padding-top: 5px;
                height: 50px;
            }
            .cardInfo-bottom {
                height: 25px;
            }
            .pickup-item {
                .name {
                    width: 80px;
                }
            }
        }
        .adventureBagPanel {
            height: 24px;
            padding-left: 5px;
            .adventureBag {
                width: 70px; // box-shadow: 3px 0px 3px #fff, -3px 0px 3px #fff, 0px -3px 3px #fff, 0px 3px 3px #fff;
                .fonts {
                    margin-right: 5px;
                    color: #E5CF50;
                }
            }
            .bloodbottle {
                border-left: 3px solid #275512;
                margin-left: 5px;
                // border-radius: 3px;
                height: 20px;
                width: 50px;
                // border: 1px solid #fff;
                .add-bloodbottle {
                    width: 25px;
                    text-align: center;
                    border-left: 1px solid #fff;
                }
            }
        }
    }
    .maze-button {
        padding: 6px 25px;
        background-color: #274B17;
        box-shadow: 3px 0px 3px #000, -3px 0px 3px #000, 0px -3px 3px #000, 0px 3px 3px #000;
        color: #bbb;
        text-align: center;
        &.leave {
            background-color: #274B17;
        }
        &.forward {
            color: #fff;
            background-color: #3D79C8;
        }
    }
    .leave-button {
        width: 60px;
        padding: 3px 0px;
        background-color: #f0f0f0;
        box-shadow: 3px 0px 3px #666, -3px 0px 3px #666, 0px -3px 3px #666, 0px 3px 3px #666;
        color: #000;
        text-align: center;
        border-radius: 4px;
    }
    .handle-button {
        margin-top: 5px;
        width: 100px;
        padding: 3px 0px;
        background-color: #f0f0f0;
        box-shadow: 3px 0px 3px #666, -3px 0px 3px #666, 0px -3px 3px #666, 0px 3px 3px #666;
        color: rgb(68, 11, 223);
        text-align: center;
    }
    .pick-button {
        width: 50px;
        padding: 3px 0px;
        background-color: #f0f0f0;
        box-shadow: 3px 0px 3px #666, -3px 0px 3px #666, 0px -3px 3px #666, 0px 3px 3px #666;
        color: rgb(68, 11, 223);
        text-align: center;
    }
    .bottom {
        height: 40px;
        .maze-leave {
            margin-top: 5px;
            min-width: 60px;
        }
    }
}